<template>
  <div>
    <!-- 表格详情 -->
    <div v-if="model === 1">
      <div class="expand-view5">
        <el-card shadow="always">
          <el-row :gutter="10">
            <el-col :span="currentRow.dangerLevel === 0 ? 12:6">
              <p class="info-title" style="color: #8c939d;">
                第{{currentRow.count}}次，{{currentRow.investigateTypeName}}
                <el-tag effect="plain" size="mini" :type="currentRow.checkStatusName | gradeCheckColor">{{
                  formatCheckStatus(currentRow.checkStatusName,currentRow.overStatus) }}
                </el-tag>
              </p>
              <p class="info-title">
                隐患等级:
                <el-tag size="mini" :style="currentRow.dangerLevelName | gradeDangerColor" class="s-white">
                  {{currentRow.dangerLevelName}}
                </el-tag>
              </p>
              <p class="info-title">
                排查单位:<span class="info">{{ currentRow.unitName}}</span>
              </p>
              <p class="info-title">
                排查人:<span class="info">{{ currentRow.userName}}</span>
              </p>
              <p class="info-title">
                排查时间:<span class="info">{{currentRow.investigateTime | formatTimer}}</span>
              </p>
              <div v-if="currentRow.checkStatus !== 0">
                <div v-if="currentRow.checkStatus === 3 || currentRow.checkStatus === 4">
                  <p class="info-title">
                    整改建议:<span class="info">{{ currentRow.advice}}</span>
                  </p>
                  <p class="info-title">
                    整改截止日期:<span class="info">{{ currentRow.rectificationTime | formatTimer2 }}</span>
                  </p>
                </div>
              </div>
              <div v-if="currentRow.checkStatus === 7">
                <span class="info-title">整改文件：</span>
                <div v-for="(item,index) in fileList2" :key="index"
                     style="text-align: center;display: inline-block;margin-left: 20px;font-size: 5px">
                  <a :download="item.name" :href="item.url" style="color:black">
                    <i class="iconfont iconPDF" style="font-size: 30px;color:red"></i>
                    <br/>
                    {{item.name}}
                  </a>
                </div>
              </div>

            </el-col>
            <el-col :span="12" v-if="currentRow.dangerLevel !== 0">
              <p class="info-title">
                排查情况
              </p>
              <div class="detail-children2">
                <div class="detail-children-info2">
                  <el-tabs v-model="detailActiveName" tab-position="left">
                    <el-tab-pane :name="item.name" :label="item.name" v-for="item in currentRow.itemList"
                                 :key="item.id">
                        <ul v-for="item2 in item.item" :key="item2.id">
                          <li><i class="el-icon-s-help" style="margin-right: 10px"></i>{{item2.name}}</li>
                          <li v-if="item2.remark"><i class="el-icon-more" style="margin-right: 10px;margin-left: 20px"></i>{{item2.remark}}</li>
                        </ul>
                    </el-tab-pane>
                  </el-tabs>
                </div>
              </div>
            </el-col>
            <el-col :span="currentRow.dangerLevel === 0 ? 12:6">
              <p class="info-title">
                现场照片
              </p>
              <div v-if="currentRow.picList.length ===0" style="line-height: 100px;text-align: center">没有上传现场照片
              </div>
              <el-carousel v-else trigger="click" direction="vertical" :interval="5000">
                <el-carousel-item v-for="(item,index) in  currentRow.picList" :key="index">
                  <el-image style="height:100%;width:100%" @click="previewImg(index, currentRow.picList)"
                            :src="constUrl+item.url" fit="cover"></el-image>
                </el-carousel-item>
              </el-carousel>
            </el-col>
          </el-row>
        </el-card>
      </div>
    </div>
    <div class="page_monitor-add2" v-if="model === 2">
      <!--  复核详情  -->
      <div class="expand-view5">
        <el-card shadow="always">
          <p class="info-title" style="color: #8c939d;">
            第{{currentRow.count}}次，{{currentRow.investigateTypeName}}
            <span class="info"><el-tag effect="plain" :type="currentRow.checkStatusName | gradeCheckColor" size="mini">{{ currentRow.checkStatusName }}</el-tag></span>
          </p>
          <el-row>
            <el-col :span="12">
              <p class="info-title">
                边坡名称:<span class="info">{{currentRow.slopeName}}</span>
              </p>
              <p class="info-title">
                路线名称:<span class="info">{{ currentRow.roadSectionName}}</span>
              </p>
              <p class="info-title">
                排查类型:<span class="info">{{currentRow.investigateTypeName}}</span>
              </p>
              <p class="info-title">
                排查单位:<span class="info">{{ currentRow.unitName}}</span>
              </p>
              <p class="info-title">
                排查时间:<span class="info">{{currentRow.investigateTime | formatTimer}}</span>
              </p>
            </el-col>
            <el-col :span="12">
              <p class="info-title">
                隐患等级:<span class="info2" :style="currentRow.dangerLevelName | gradeDangerColor">{{ currentRow.dangerLevelName }}</span>
              </p>
              <p class="info-title">
                标段名称:<span class="info">{{ currentRow.roadSectionName}}</span>
              </p>
              <p class="info-title">
                起止桩号:<span class="info">{{ currentRow.startPointStakeNum}}~{{ currentRow.endPointStakeNum}}</span>
              </p>
              <p class="info-title">
                排查人:<span class="info">{{ currentRow.userName}}</span>
              </p>
            </el-col>
          </el-row>
        </el-card>
        <el-card shadow="always" v-if="currentRow.dangerLevel !== 0">
          <p class="info-title">
            排查情况
          </p>
          <div class="detail-children">
            <div class="detail-children-info ">
              <el-tabs v-model="detailActiveName" tab-position="left">
                <el-tab-pane :name="item.name" :label="item.name" v-for="item in currentRow.itemList"
                             :key="item.id">
                    <ul v-for="item2 in item.item" :key="item2.id">
                      <li><i class="el-icon-s-help" style="margin-right: 10px"></i>{{item2.name}}</li>
                      <li v-if="item2.remark"><i class="el-icon-more" style="margin-right: 10px;margin-left: 20px"></i>{{item2.remark}}</li>
                    </ul>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </el-card>
        <el-card shadow="always">
          <p class="info-title">
            现场照片
          </p>
          <div v-if="currentRow.picList.length ===0" style="line-height: 100px;text-align: center">没有上传现场照片
          </div>
          <el-carousel v-else trigger="click" direction="vertical" :interval="5000">
            <el-carousel-item v-for="(item,index) in  currentRow.picList" :key="index">
              <el-image style="height:100%;width:100%" @click="previewImg(index, currentRow.picList)"
                        :src="constUrl+item.url" fit="cover"></el-image>
            </el-carousel-item>
          </el-carousel>
        </el-card>
      </div>
    </div>
    <picture-viewer ref="imageViewer"></picture-viewer>
  </div>
</template>
<script>
import constUrl from '@/services/env'
import PictureViewer from '@/components/picture-viewer/index-name';
import ItemMixins from "./item.mixins";

export default {
  components: {
    PictureViewer,
  },
  mixins: [ItemMixins],
  props: ['value', 'currentRow', 'model', 'isLook'],
  data() {
    return {
      constUrl,
      detailActiveName: '',
    }
  },
  methods: {

    // 查看大图
    previewImg(index, urls) {
      const urlList = JSON.parse(JSON.stringify(urls))
      urlList.map(x => {
        x.url = this.constUrl + x.url
        return x
      })
      this.$refs.imageViewer.showViewer(urlList, index)
    },
  },
  mounted() {
    if (this.currentRow.itemList) {
      this.detailActiveName = this.currentRow.itemList[0] ? this.currentRow.itemList[0].name : ''
    }
  },
  activated() {
  },
  created() {
  },
  computed: {
    fileList2() {
      return this.filePathHandle(this.currentRow.rectificationFileList)
    },
  },
}
</script>

<style lang="less">
  .page_monitor-add2 {
    width: 710px;
    margin: 0 auto;

    .page-title {
      margin-bottom: 50px;
      padding: 28px;
      font-size: 30px;
      line-height: 18px;
      text-align: center;
      color: white;
      font-weight: 600;
      background-color: #1990FE;
      border-radius: 20px;
    }
  }

  .detail-children2 {
    border-left: 2px;
    border-right: 2px;
    border-style: double;
    border-color: #e4e4e4;
    padding: 20px;

  }

  .detail-children-info2 {
    background-color: rgb(243 243 243);
    min-height: 220px;
    padding: 10px;
    border-radius: 20px
  }

  .geology {
    font-size: 20px;
    border-bottom: 1px solid;
    margin-bottom: 10px;
    margin-top: 20px;
  }

  .geology-children {
    font-size: 15px;
    border-bottom: 1px solid;
    margin-bottom: 20px;
    margin-top: 20px;
    margin-left: 20px;
  }

  .el-steps--simple {
    margin-bottom: 20px;
  }

  .page_main {
    /deep/ .el-table__expand-icon {
      font-size: 15px !important;
    }
  }

  .expand-view5 {
    .el-card {
      margin-top: 10px;
    }
    li {
      font-size: 15px;
      margin-left: 10px;
      line-height: 30px;
      list-style: disc;
    }

    /deep/ .el-card__body {
      padding: 20px;
    }

    .el-tabs__item {
      font-size: 18px;
      font-weight: 600;
    }

    .info-title {
      font-size: 18px;
      color: #1990FE;
      font-weight: 600;
      margin-bottom: 10px;
    }

    .info {
      font-size: 15px;
      margin-left: 20px;
      color: #8c939d;
    }
    .s-white {
      color: #FFFFFF;
    }
    .info2 {
      border-radius: 5px;
      padding: 5px 10px;
      font-size: 15px;
      margin-left: 20px;
      color: #fff;
    }
  }
</style>
